<template>
  <div class="item">
    <img :src="item.image" alt="" />
    <div>
      <p class="title">
        <a href="#">{{ item.title }}</a>
      </p>
      <p class="content">{{ item.context }}</p>
      <ul class="footer">
        <li class="adderss">
          <span class="fon12">{{ item.address }}</span>
        </li>
        <li class="userimg">
          <img :src="item.userImg" width="18" alt="" />
          <span class="fon12">{{ item.userName }}</span>
        </li>
        <li class="show">
          <span class="fon12">{{ item.watchSum }}/{{ item.watchingNum }}</span>
        </li>
        <li class="bbbb"></li>
        <li class="liked">{{ item.liked }}</li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  props: ["item"],
};
</script>
<style lang="scss" scoped>
.item {
  display: flex;
  position: relative;
  height: 150px;
  padding: 15px;
  & > img {
    margin-right: 25px;
  }
  &:hover {
    background-color: #f8f8f8;
  }
  .title {
    margin-bottom: 1em;
    a {
      font-size: 18px;
      color: #333333;
      display: inline-block;
      width: 450px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  .content {
    color: #666666;
    line-height: 150%;
    font-size: 14px;
    height: 60px;
    margin-bottom: 20px;
  }
  .footer {
    display: flex;
    position: relative;
    .bbbb {
      position: absolute;
      width: 44px;
      height: 41px;
      top: -12px;
      right: 0;
      background-image: url("~@/assets/images/icon_support.png");
      background-size: 94%;
      background-repeat: no-repeat;
    }
    .liked {
      position: absolute;
      right: 56px;
      top: 4px;
      color: #fd9d00;
    }
    .adderss {
      padding: 0 16px;
      span {
        position: relative;
        &::before {
          position: absolute;
          content: "";
          width: 21px;
          left: -16px;
          height: 18px;
          top: -2px;
          background-image: url("~@/assets/images/mfw_logo2.png");
          background-size: 900%;
          background-position: 0 -44px;
        }
      }
    }
    .userimg {
      img {
        border-radius: 50%;
        transform: translateY(20%);
      }
      span {
        color: #fd9d00;
      }
    }
    .show {
      position: relative;
      margin-left: 30px;
      span {
        &::before {
          position: absolute;
          content: "";
          width: 21px;
          left: -21px;
          height: 18px;
          top: 2px;
          background-image: url("~@/assets/images/mfw_logo2.png");
          background-size: 900%;
          background-position: -27px -44px;
        }
      }
    }
  }
}
.fon12 {
  font-size: 14px;
  color: #666666;
  padding: 0 2px;
}
</style>